<template>
	<el-input v-show="false" :model-value="componentVal" :placeholder="comPlaceholder" clearable :style="{ width: handleStyle() }" />
	<el-input
		ref="inputRef"
		v-model="viewVal"
		:placeholder="comPlaceholder"
		clearable
		:style="{ width: handleStyle() }"
		@focus="handleFocus"
		@clear="handleClear"
	/>
	<!-- 弹窗 -->
	<LxDialog v-model="showDialog" :dialogConfig="dialogConfig" :inputData="props.inputData" :pageData="pageData" />
</template>
<script lang="ts" setup>
import useElement from './hooks/useElement';
import { TablePageType, TabFieldType, EventExcuteType, DialogType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import LxDialog from './lx-dialog.vue';
import { DialogConfigType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import { ElInput } from 'element-plus';
import { useCustomTableStore } from '/@/stores/customTable';
const customTableStore = useCustomTableStore();

const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		filterIdx: number;
		located: string;
		pageData?: any;
		inputData: Record<string, any>;
		globalData?: any;
		modelValue: string;
		FieldItem: TabFieldType | null;
	}>(),
	{
		located: 'table',
		filterIdx: -1,
		pageData: {},
		globalData: null,
		modelValue: '',
		FieldItem: null,
	}
);

const emit = defineEmits(['update:modelValue', 'updatePageDataFieldObj']);
const { FieldItem, located, inputData, pageData, globalData } = toRefs(props);

const componentVal = ref('');
const viewVal = ref('');
watch(
	() => props.modelValue,
	(val) => {
		componentVal.value = val;
		if (val === '') {
			inputRef.value?.clear();
		}
	},
	{
		immediate: true,
	}
);
/**
 * @description: 计算输入框提示--因为自定义页面的输入框和表单的输入框配置信息可能不太一样
 * 需要处理一下
 */
const comPlaceholder = computed(() => {
	// 如果是自定义表单的提示,那么返回表单提示
	if (FieldItem.value?.TipsText || FieldItem.value?.TipsText === '') {
		return FieldItem.value?.TipsText;
	} else {
		// 如果都不是
		return '';
	}
});

const { handleStyle } = useElement(located, FieldItem.value!, componentVal, props);
const dialogConfig = reactive<DialogConfigType>({
	title: '弹窗选择',
	opType: DialogType.customize,
	ot: EventExcuteType.Customizepage,
	submitUrl: props.FieldItem?.Extend?.dialogSelectCfg.pageID || '-1',
	width: 'auto',
	superiorParams: {},
	formData: {},
	fieldDefines: [],
	isDisabledHanlde: true,
	isTabRadio: true,
});
const showDialog = ref(false);
const handleFocus = () => {
	console.log('dialogSelectCfg');

	showDialog.value = true;

	setTimeout(() => {
		inputRef.value?.blur();
	}, 500);
};
const handleClear = () => {
	emit('update:modelValue', '');
	console.log('handleClear');
	// inputRef.value?.clear();
};
const inputRef = ref<InstanceType<typeof ElInput>>();
watch(
	() => customTableStore.tableRowData,
	(newVal) => {
		const dataIdent = props.FieldItem?.Extend?.dialogSelectCfg.dataIdent;
		const viewField = props.FieldItem?.Extend?.dialogSelectCfg.viewField;
		viewVal.value = newVal[viewField] || '';
		console.log('watcg customTableStore', newVal[dataIdent] || '');
		emit('update:modelValue', newVal[dataIdent] || '');

		if (props.FieldItem?.IfCascadeShow) {
			emit('updatePageDataFieldObj', newVal, `${props.FieldItem?.FieldName}Obj`);
		}
	},
	{
		deep: true,
	}
);
</script>
<style lang="scss" scoped></style>
